import './index.css';

import { Image } from '@nutui/nutui-react';
import { useRequest } from 'ahooks';
import { parse } from 'querystring';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

import { apiGoodsDetailByGet } from '@/application/apis/goods';
import { MiniApp } from '@/types/common';

import { PhoneDialog } from './components/PhoneDialog';

export default function Invitee() {
  const params = useParams();
  const searchParams = parse(window.location.search.replace('?', ''));
  const [goodsId] = useState(searchParams.goodsId);
  const [activityId] = useState(searchParams.activityId);
  const { data, refresh } = useRequest(
    () => apiGoodsDetailByGet({ goodsId: goodsId as unknown as number }),
    {
      manual: true
    }
  );
  // const { data: activity, refresh: getActivity } = useRequest(
  //   () => apiGoodsDetailByGet({ activityId: activityId as unknown as number }),
  //   {
  //     manual: true
  //   }
  // );

  useEffect(() => {
    refresh();
    // getActivity();
  }, []);
  return (
    <div className="invitee relative min-h-screen break-all safe-bottom">
      <Image
        src={new URL('/images/home/bg_home.png', import.meta.env.VITE_IMG_BASE_URL).href}
        className="!absolute h-[560px] w-full"
      />
      <div className="z-1 relative top-24.5">
        <div className="mx-auto flex h-6 w-fit  items-center rounded-full bg-[#FFFC86] px-3.75 text-sm text-[#008C0D]">
          本期活动：2023.3.6-2023.3.12
        </div>
        <div className="active-content mt-2">
          <div className="absolute left-0 right-0 top-18 text-center font-medium text-[#105506]">
            {data?.goodsName}
          </div>
          <div className="absolute left-0 right-0 top-27 mx-auto w-75">
            <Image src={data?.pictureActive} className="h-full w-75 overflow-hidden !rounded-lg" />
          </div>
          <div
            className="absolute left-0 right-0 top-85.75 mx-auto w-fit"
            onClick={() => {
              PhoneDialog.show({
                spreadKey: params.id,
                onConfirm: () => {
                  window.location.href = MiniApp;
                }
              });
            }}
          >
            <Image
              src={new URL('/images/invitee/zl.png', import.meta.env.VITE_IMG_BASE_URL).href}
              className="h-19.25 w-72"
            />
            <Image
              src={
                new URL('/images/home/img_home_hand.png', import.meta.env.VITE_IMG_BASE_URL).href
              }
              className="!absolute -right-6 top-6 h-16.5 w-16.25"
            />
          </div>
        </div>
        <div
          className="mx-auto mt-4 w-fit"
          onClick={() => {
            window.location.href = MiniApp;
          }}
        >
          <Image
            src={new URL('/images/invitee/wyypt.png', import.meta.env.VITE_IMG_BASE_URL).href}
            className="h-12.5 w-71.5"
          />
        </div>
      </div>
    </div>
  );
}
